<div class="donateBtn">
  <button class="primary" (click)="dialog.showModal()" i18n>Donate</button>
  <span class="statement" (click)="statement.showModal()" i18n>Statement for Delivery and Donation</span>
</div>
<dialog class="statementDialog" #statement>
  <dstore-close-button [dialog]="statement"></dstore-close-button>
  <app-statement></app-statement>
</dialog>
<dialog class="donateDialog" (close)="close()" #dialog>
  <dstore-close-button [dialog]="dialog"></dstore-close-button>
  <ng-container *ngIf="dialog.open">
    <ng-container *ngIf="!waitPay$ && !loading; else paying">
      <div class="donateForm">
        <h3 i18n>Donate</h3>
        <div class="formField">
          <label i18n>Amount:</label>
          <div class="amount">
            <input type="text" [value]="amount" (input)="inputChange($event)" (keyup.enter)="pay()" />
            <div class="rand" (click)="rand()" i18n>Random</div>
          </div>
        </div>
        <div class="formField">
          <label class="paymentLabel" i18n>Payment:</label>
          <div class="payment">
            <label>
              <input type="radio" name="payment" [(ngModel)]="payment" [value]="Payment.WeChat" />
              <img class="paymentIcon wechat" />
            </label>
            <label>
              <input type="radio" name="payment" [(ngModel)]="payment" [value]="Payment.AliPay" />
              <img class="paymentIcon alipay" />
            </label>
            <br />
            <label>
              <input type="radio" name="payment" [(ngModel)]="payment" [value]="Payment.PayPal" />
              <img class="paymentIcon paypal" />
            </label>
          </div>
        </div>

        <button class="btn" [disabled]="amount <= 0" (click)="pay(); $event.target.disabled = true">
          <ng-container i18n>Pay Now</ng-container>
        </button>
      </div>
    </ng-container>

    <ng-template #paying>
      <ng-template #loading>
        <br />
        <app-wait></app-wait>
      </ng-template>
      <ng-container *ngIf="waitPay$ | async as check; else loading">
        <div class="waitPay">
          <ng-container *ngIf="check.isExist; else $wait">
            <img class="icon" dstoreCover="icon" src="/assets/icons/ok.svg" /> <br />
            <div i18n>Payment Successful!</div>
          </ng-container>
          <ng-template #$wait>
            <ng-container *ngIf="qrImg; else $msg">
              <div>
                <ng-container i18n>WeChat Pay:</ng-container>
                &nbsp; <span class="amount" i18n>RMB ￥{{ amount }}</span>
              </div>
              <img [src]="qrImg" />
              <ng-container *ngIf="check.isPaying">
                <img class="wait" />
                <div i18n>Processing payment, please wait...</div>
              </ng-container>
            </ng-container>
            <ng-template #$msg>
              <img class="wait" [style.width.rem]="4" />
              <div i18n>Processing payment, please wait...</div>
            </ng-template>
          </ng-template>
        </div>
      </ng-container>
    </ng-template>
  </ng-container>
</dialog>

<app-donors [appName]="appName"></app-donors>
